<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>TweenMax</title>
    <style type="text/css">
    .grey{ width: 200px; height: 100px; border: 1px solid #DDD; text-align: center;}
    </style>
</head>
<body>
    <h2>第1组</h2>
    <div class="grey greyA1">Bounce.easeIn</div>
    <div class="grey greyA2">Bounce.easeOut</div>
    <div class="grey greyA3">Bounce.easeInOut</div>
    <h2>第2组</h2>
    <div class="grey greyB1">Elastic.easeIn</div>
    <div class="grey greyB2">Elastic.easeOut</div>
    <div class="grey greyB3">Elastic.easeInOut</div>
    <h2>第3组</h2>
    <div class="grey greyC1">Power0.easeIn</div>
    <div class="grey greyC2">Power0.easeOut</div>
    <div class="grey greyC3">Power0.easeInOut</div>
    <div class="grey greyC4">Power0.easeNone(对于线性动画，请使用Power0.easeNone)</div>
</body>
<script src="https://www.tweenmax.com.cn/greensock-js/minified/TweenMax.min.js"></script>
<script>
TweenMax.to('.greyA1', 2, {
    x: 300,
    ease: Bounce.easeIn,
});
TweenMax.to('.greyA2', 2, {
    x: 300,
    ease: Bounce.easeOut,
});
TweenMax.to('.greyA3', 2, {
    x: 300,
    ease: Bounce.easeInOut,
});
</script>

<script>
TweenMax.to('.greyB1', 2, {
    x: 300,
    ease: 'Elastic.easeIn',
});
TweenMax.to('.greyB2', 2, {
    x: 300,
    ease: 'Elastic.easeOut',
});
TweenMax.to('.greyB3', 2, {
    x: 300,
    ease: 'Elastic.easeInOut',
});
</script>

<script>
TweenMax.to('.greyC1', 2, {
    x: 300,
    ease: 'Power0.easeIn',
});
TweenMax.to('.greyC2', 2, {
    x: 300,
    ease: 'Power0.easeOut',
});
TweenMax.to('.greyC3', 2, {
    x: 300,
    ease: 'Power0.easeInOut',
});
TweenMax.to('.greyC4', 2, {
    x: 300,
    ease: 'Power0.easeNone',
});
</script>
</html>
